<template>
  <div class="breadcrumb">
    <div
      class="breadcrumb-list"
      v-for="(item, index) in breadcrumbList"
      :key="index"
    >
      <div
        :class="[
          'breadcrumb-list-name',
          breadcrumbList.length - 1 != index
            ? 'breadcrumb-list-name-active'
            : '',
        ]"
        @click="setBreadcrumb(item, index)"
      >
        {{ item.title }}
      </div>
      <div
        class="breadcrumb-list-active"
        v-if="breadcrumbList.length - 1 != index"
      >
        /
      </div>
    </div>
  </div>
</template>

<script>
import Way from '@/utils/way';
import { mapMutations } from 'vuex';
export default {
  name: 'BreadcrumbChild',
  components: {},
  props: {
    headerTitle: {
      type: Array,
    },
  },
  data() {
    return {
      breadcrumb: [
        {
          path: 'mall',
          title: '首页',
        },
        {
          path: 'product',
          title: '产品市场',
        },
        {
          path: 'productInfo',
          title: '产品详情',
        },
        {
          path: 'material',
          title: '素材市场',
        },
        {
          path: 'materialInfo',
          title: '素材详情',
        },
        {
          path: 'collect',
          title: '定制产品',
        },
        {
          path: 'collect',
          title: '我的收藏',
        },
        {
          path: 'collect',
          title: '成品管理',
        },
        {
          path: 'collect',
          title: '汇出记录',
        },
        {
          path: 'shopManagement',
          title: '管理设置',
        },
        {
          path: 'shopManagement',
          title: '店铺管理',
        },
        {
          path: 'ProductStencil',
          title: '产品模板设置',
        },
        {
          path: 'skuManagement',
          title: 'SKU管理',
        },
        {
          path: 'pricingStencil',
          title: '定价模板',
        },
        {
          path: 'pricingManagement',
          title: '定价模板管理',
        },
      ],
    };
  },
  computed: {
    breadcrumbList() {
      const headerTitle = this.headerTitle;
      let list = [];
      this.breadcrumb.forEach((oj) => {
        if (headerTitle.some((ol) => ol == oj.title)) {
          list.push(oj);
        }
      });
      return list;
    },
  },
  watch: {},
  created() {},
  methods: {
    // 点击事件
    setBreadcrumb(item, index) {
      const that = this;
      const breadcrumbList = that.breadcrumbList;
      if (breadcrumbList.length - 1 == index) return;
      this.$router.push({ name: item.path });
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.breadcrumb {
  display: flex;
  font-size: 14px;

  .breadcrumb-list {
    display: flex;

    .breadcrumb-list-name {
      color: #606266;
    }

    .breadcrumb-list-name-active {
      font-weight: 700;
      color: #333;
      cursor: pointer;
    }

    .breadcrumb-list-active {
      color: #c0c4cc;
      margin: 0 9px;
    }
  }
}
</style>
